<{extend name="public/base"}>
<{block name="foot_source"}>
<script type="text/javascript" src="/static/webuploader/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
<style type="text/css">
    #product-list{
        width:100%;
    }
    #product-list td {
        border:1px solid silver;
        height:35px;
        text-align:center;
    }
    .sum{
        color:red;
    }
</style>
<{/block}>
<{block name="content"}>
<!-- left column -->
<div class="col-md-12">
    <!-- general form elements -->
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title"><{$title}></h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form" method="post" action="<{:url('admin/order_service/handle')}>" id="form" >
            <div class="box-body">
                <input type="hidden" name="user_id" value="<{$user_id}>" id="user_id" />
                <div class="form-group">
                    <label for="title">选择产品</label>
                    <div style="color:red;">一个订单只能同时选择一个工厂的产品</div>
                    <div>
                        <a href="javascript:;" class="btn btn-primary" id="choose-product">选择产品</a>
                    </div>
                </div>

                <div class="form-group">
                    <div class="">
                        <table id="product-list">
                            <tr>
                                <td>产品名称</td><td>产品编号</td><td>市场价格</td><td>团购价格</td><td>佣金</td><td>数量</td><td>实际支付价格</td><td>实际产生佣金</td>
                            </tr>
                        </table>
                    </div>
                    <div class="form-control">
                        总价：<span id="total_price" class="sum">0.00</span> 总佣金：<span id="total_salary" class="sum">0.00</span> 总数：<span id="total_number" class="sum">0</span>
                    </div>
                </div>

                <div>
                    <label>风格详情图列表</label>
                    <div id="image-list-container"></div><!---详情列表--->
                    <div class="clearfix"></div>
                    <div id="image_list">
                    </div>
                </div>
                <div id="uploader2" class="wu-example">
                    <!--用来存放文件信息-->
                    <div id="thelist2" class="uploader-list"></div>
                    <div class="btns">
                        <div id="picker2">选择文件</div>
                    </div>
                </div>


                <div class="form-group">
                    <label for="title">地址</label>
                    <input type="text" name="address" class="form-control" id="address"/>
                </div>

                <div class="form-group">
                    <label for="title">邮编</label>
                    <input type="text" name="zcode" class="form-control" id="zcode"/>
                </div>

                <div class="form-group">
                    <label for="title">手机人联系方式</label>
                    <input type="text" name="cellphone" class="form-control" id="cellphone"/>
                </div>

                <div class="form-group">
                    <label for="title">选择展览中心（根据情况自行选择）</label>
                    <select name="company_four_id" id="company_four_id" class="form-control">
                        <option value="0" style="color:red;">不选择（直接在工厂下单）</option>
                        <?php foreach($expo as $key => $val ) {?>
                        <option value="<{$val.id}>"><{$val.company_name}></option>
                        <?php } ?>
                    </select>
                </div>

            </div>
            <!-- /.box-body -->

            <div class="box-footer">
                <a type="submit" class="btn btn-primary" id="submit">提交</a>
                <a href="javascript:window.history.go(-1);" class="btn btn-default" >返回</a>
            </div>
        </form>
    </div>
    <!-- /.box -->
</div>


<{/block}>
<{block name="foot_script"}>

<!-- 弹出框 -->
<div class="modal fade" id="NoPermissionModal">
    <div class="modal-dialog" style="width: auto;" >
        <div class="modal-content" style="width: 60%;margin:0 auto;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="NoPermissionModalLabel">产品列表</h4>
            </div>
            <div class="modal-body">
                <iframe id="NoPermissioniframe" width="100%" height="500px" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">    关  闭    </button>
            </div>
        </div>
    </div>
</div>




<script type="text/javascript">
    $(function(){
        $("#choose-product").click(function(){
            var frameSrc = '<?php echo url("admin/order_service/productList"); ?>';
            $("#NoPermissioniframe").attr("src", frameSrc);
            $('#NoPermissionModal').modal({ show: true, backdrop: 'static' });
        });

        $('#NoPermissionModal').on('hidden.bs.modal', function () {

        });
    });

    var product_list = {};
    var summary = {total_price:0,total_salary:0,total_number:0};  //后台还是要计算一次的

    function addProductToOrder(product_id){
        $.post('/admin/order_service/getProduct',{product_id:product_id,user_id:'<{$user_id}>'},function(res){
            console.log(res);
            if(!res.code){
                alert(res.msg);return;
            }
            var data = res.data;
            //初始化该产品数据
            if(product_list[data.id]){
                alert("你已经填加了该商品");
                return;
            }
            product_list[data.id] = data;
            product_list[data.id]['number'] = 1;
            product_list[data.id]['total_sell_price'] = data.sell_price;
            product_list[data.id]['total_salary'] = data.salary;

            countSummary();

            var str = '<tr>' +
                '<td>'+data.title+'</td>' +
                '<td>'+data.serial_number+'</td>' +
                '<td>'+data.market_price+'</td>' +
                '<td>'+data.sell_price+'</td>' +
                '<td>'+data.salary+'</td>' +
                '<td><span class="btn btn-default btn-xs minus" data-id="'+data.id+'"> - </span> <span class="number-'+data.id+'"> 1 </span> <span class="btn btn-default btn-xs plus" data-id="'+data.id+'"> + </span></td>' +
                '<td class="total_sell_price_'+data.id+'">'+data.sell_price+'</td>' +
                '<td class="total_salary_'+data.id+'">'+data.salary+'</td>' +
                '</tr>';
            $("#product-list").append(str);
        });
    }

    $("#product-list").delegate(".minus",'click',function(){
        var id = $(this).data('id');
        if(product_list[id]['number'] > 0){
            product_list[id]['number']--;
            product_list[id]['total_sell_price'] = parseInt(product_list[id]['number']) * parseFloat(product_list[id]['sell_price']);
            product_list[id]['total_salary']     = parseInt(product_list[id]['number']) * parseFloat(product_list[id]['salary']);
        }
        countSummary();
    });

    $("#product-list").delegate(".plus",'click',function(){
        var id = $(this).data('id');
        product_list[id]['number']++;
        product_list[id]['total_sell_price'] = parseInt(product_list[id]['number']) * parseFloat(product_list[id]['sell_price']);
        product_list[id]['total_salary']     = parseInt(product_list[id]['number']) * parseFloat(product_list[id]['salary']);
        countSummary();
    });

    //对商品做总的计算
    function countSummary() {
        console.log('begin count');
        summary = {total_price:0,total_salary:0,total_number:0};  //后台还是要计算一次的
        for( var s in product_list ){
            summary.total_number += parseInt(product_list[s]['number']);
            summary.total_price  += parseFloat(product_list[s]['total_sell_price']);
            summary.total_salary += parseFloat(product_list[s]['total_salary']);
            $(".number-"+s).html(product_list[s]['number']);
            $(".total_sell_price_"+s).html(product_list[s]['total_sell_price']);
            $(".total_salary_"+s).html(product_list[s]['total_salary']);
        }
        $("#total_price").html(summary.total_price);
        $("#total_number").html(summary.total_number);
        $("#total_salary").html(summary.total_salary);

        console.log('end count');
    }


    //提交处理
    $("#submit").click(function(){
        var user_id = $("#user_id").val();
        var address = $("#address").val();
        var zcode   = $('#zcode').val();
        var cellphone = $("#cellphone").val();
        var company_four_id = $("#company_four_id").val();
        var picture_list = [];

        $("#image-list-container img").each(function(index,item){
            //$("#image_list").append("<input type='hidden' value='"+$(item).data('src')+"' name='image_list[]' />");
            picture_list.push($(item).data('src'));
        });

        $.post('/admin/order_service/create',{product_list:product_list,summary:summary,user_id:user_id,address:address,zcode:zcode,cellphone:cellphone,picture_list:picture_list,company_four_id:company_four_id},function(res){
            alert(res.msg);
            if(res.code == 1){
                window.location.reload();
            }
        });
    });


    var BASE_URL = '/static/webuploader';
    var uploader2 = WebUploader.create({
        swf: BASE_URL + '/js/Uploader.swf',
        server: '/admin/api/upload',
        pick: '#picker2',
        resize: false,
        duplicate: true //实现重复上传
    });

    uploader2.on('fileQueued',function(file){
        uploader2.upload();
    });

    uploader2.on('uploadSuccess',function(file,data){
        var image = '<div style="width:100px;float:left;text-align:center;margin:10px;">' +
            '<img src="'+data.url+'"  style="width:100px;height:100px;margin-bottom:5px;" data-src="'+data.url+'"/>' +
            '<div><span class="btn btn-warning btn-sm del">删除</span> <span class="btn btn-success btn-sm move-to-right">-></span></div>' +
            '</div>';
        console.log(data);
        $("#image-list-container").append(image);

    });

    var imageShow = document.createElement('img');
    imageShow.style.display = 'none';
    document.body.appendChild(imageShow);
    $("#image-list-container").delegate('img','mouseover',function(){
        imageShow.src = $(this).attr('src');
        imageShow.style.cssText = "width:"+imageShow.width+"px;height:"+imageShow.height+"px;display:block;position:fixed;left:50%;top:50%;margin-left:-"+(imageShow.width)/2 + "px;margin-top:-"+(imageShow.height)/2+"px;";
    });
    $("#image-list-container").delegate('img','mouseleave',function(){
        imageShow.style.display = 'none';
    });
    $("#image-list-container").delegate('.del','click',function(){
        $(this).parent().parent().remove();
    });
    $("#image-list-container").delegate('.move-to-right','click',function(){
        var $dom = $(this).parent().parent();
        var $next = $dom.next();
        $next.after($dom);
    });



</script>
<{/block}>

